import { defineStore } from 'pinia'
import { AnimateType, MultiTabMode, ThemeSettings } from '@/interface'
import { themeSettings } from '@/settings'
import type { GlobalThemeOverrides } from 'naive-ui'
import { getHoverAndPressedColor } from './helpers'
import { NavModeType } from '@/interface'
import { store } from '@/store'

const themeStore = defineStore({
  id: 'theme-store',
  state(): ThemeSettings {
    return { ...themeSettings }
  },
  getters: {
    // naive UI 主题配置
    themeOverrides(): GlobalThemeOverrides {
      const {
        themeColor: primaryColor,
        otherColor: {
          info: infoColor,
          success: successColor,
          warning: warningColor,
          error: errorColor,
        },
      } = this
      // 控件 hover 状态颜色变量
      const { hover: primaryColorHover, pressed: primaryColorPressed } =
        getHoverAndPressedColor(primaryColor)
      const { hover: infoColorHover, pressed: infoColorPressed } =
        getHoverAndPressedColor(infoColor)
      const { hover: successColorHover, pressed: successColorPressed } =
        getHoverAndPressedColor(successColor)
      const { hover: warningColorHover, pressed: warningColorPressed } =
        getHoverAndPressedColor(warningColor)
      const { hover: errorColorHover, pressed: errorColorPressed } =
        getHoverAndPressedColor(errorColor)
      const colorLoading = primaryColor

      return {
        common: {
          primaryColor,
          primaryColorHover,
          primaryColorPressed,
          infoColor,
          infoColorHover,
          infoColorPressed,
          successColor,
          successColorHover,
          successColorPressed,
          warningColor,
          warningColorHover,
          warningColorPressed,
          errorColor,
          errorColorHover,
          errorColorPressed,
        },
        LoadingBar: {
          colorLoading,
        },
      }
    },
    isVerticalNav(): boolean {
      return this.navStyle.mode === 'vertical' || this.navStyle.mode === 'vertical-mix'
    },
  },
  actions: {
    /** 指定是否为深色模式 */
    handleDarkMode(darkMode: boolean) {
      this.darkMode = darkMode
    },
    /** 设置系统主题颜色 */
    setThemeColor(color: string) {
      this.themeColor = color
    },
    /** 设置导航栏模式(导航栏位置) */
    setNavMode(mode: NavModeType) {
      this.navStyle.mode = mode
    },
    /** 折叠菜单 */
    handleSplitMenu(isSplit: boolean) {
      this.menuStyle.splitMenu = isSplit
    },
    /** 更改菜单展开的宽度 */
    handleMenuWidth(width: number | null) {
      if (width !== null) {
        this.menuStyle.width = width
      }
    },
    /** 更改头部的高度(不含 tab 标签) */
    handleHeaderHeight(height: number | null) {
      if (height !== null) {
        this.headerStyle.height = height
      }
    },
    /** 固定头部 */
    handleFixedHeader(isFixed: boolean) {
      this.headerStyle.fixed = isFixed
    },
    /** 设置多标签显示 */
    handleMultiTabVisible(visible: boolean) {
      this.multiTabStyle.visible = visible
    },
    /** 设置多页签的显示风格 */
    handleMultiTabMode(mode: MultiTabMode) {
      this.multiTabStyle.mode = mode
    },
    /** 设置面包屑是否可见 */
    handleCrumbsVisible(visible: boolean) {
      this.crumbsStyle.visible = visible
    },
    /** 设置面包屑图标是否可见 */
    handleCrumbsIconVisible(visible: boolean) {
      this.crumbsStyle.showIcon = visible
    },
    /** 开启页面切换动画 */
    handlePageAnimate(animate: boolean) {
      this.pageStyle.animate = animate
    },
    /** 设置页面前后动画类型 */
    handlePageAnimateType(animateType: AnimateType) {
      this.pageStyle.animateType = animateType
    },
  },
})

export default function useThemeStore() {
  return themeStore(store)
}
